<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerList" :key="item.id">
        <el-image
          class="image"
          :src="filesUrl + item.imgUrl"
          fit="cover"
        ></el-image>
        <!-- <img :src="filesUrl + item.imgUrl" alt="" /> -->
      </van-swipe-item>
    </van-swipe>

    <div class="box-center">
      <!-- 分类 -->
      <div class="classification">
        <p>分类:</p>
        <ul>
          <li :class="{ on: classSelectIndex === 0 }" @click="selectClass(0)">
            全部
          </li>
          <li
            :class="{ on: classSelectIndex === index + 1 }"
            v-for="(item, index) in classification"
            :key="item.id"
            @click="selectClass(index + 1)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <!-- 参赛列表 -->
      <div class="contest">
        <ul>
          <!-- <li @click="goDetail(item.id)"> -->
          <li
            @click="goDetail(item.id)"
            v-for="(item, index) in contestList"
            :key="item.id"
          >
            <el-image :src="filesUrl + item.picture"></el-image>
            <h4>{{ item.title }}</h4>
            <p>比赛时间：{{ item.startTime }}-{{ item.endTime }}</p>
            <p>主办方：{{ item.sponsor }}</p>
          </li>
        </ul>
      </div>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import loginVue from "../components/login.vue";
import { getContestClass, getBanner, getContestList } from "../../api/index";

export default {
  name: "HomeView",
  data() {
    return {
      bannerList: [], // 轮播图
      contestList: [], // 赛事数据
      pageInfo: {}, //分页
      classification: [], //分类
      classSelectIndex: 0,
      // show: false,
      filesUrl: "",
      pageIndex: 1,
      pageSize: 10,
    };
  },
  watch: {
    $route: {
      handler() {
        this.getContestList();
      },
      deep: true,
    },
  },
  methods: {
    selectClass(index) {
      this.classSelectIndex = index;
      // todo 将当前页改为1
      this.getContestList();
    },
    // 跳转到详情页面
    goDetail(id) {
      this.$router.push({ path: "/detail", query: { id: id } });
    },
    // 获取分类
    async getContestClass() {
      const res = await getContestClass();
      if (res.code == 0) {
        this.classification = res.data;
      }
    },
    // 获取轮播图
    async getBanner() {
    
      const res = await getBanner();
      if (res.code == 0) {
        this.bannerList = res.data;
      }
    },
    // 获取赛事数据
    async getContestList() {
      let cid = null;
      if (this.classSelectIndex !== 0)
        cid = this.classification[this.classSelectIndex - 1].id;
      const res = await getContestList({
        cid: cid,
        keyword: this.$route.query.keyword,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      });
      if (res.code == 0) {
        this.contestList = res.data.list;
        this.pageInfo = res.data.pageInfo;
      }
    },
    // 接收子组件传来的参数
    showLogin(e) {
      this.show = e;
    },
    // 获取每页多少条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.getContestList();
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getContestList();
    },
  },
  computed: {},
  filters: {},
  components: {
    loginVue,
  },
  created() {
    this.filesUrl = process.env.VUE_APP_FILE_URL;
    this.getContestClass();
    this.getBanner();
    this.getContestList();
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  font-size: 0.9rem;
  overflow: hidden;

  .box-center {
    width: 100%;
    box-sizing: border-box;
  }

  .my-swipe {
    .image {
      width: 100%;
      height: 27vw;
    }
  }

  .classification {
    width: 100%;
    min-width: 210px;
    display: flex;
    align-items: start;
    padding: 0 1.25rem;
    p {
      width: 3.625rem;
      padding: 0.6rem;
      box-sizing: border-box;
      margin: 0;
    }
    ul {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      li {
        padding: 0.6rem;
        box-sizing: border-box;
        margin: 0.25rem;
        border-radius: 0.375rem;
        border: 1px solid #e3e3e3;
        cursor: pointer;

        &.on {
          background-color: #ecf5ff;
          color: #409eff;
          cursor: pointer;
        }
      }
    }
  }

  .contest {
    padding: 1.25rem;
    box-sizing: border-box;
    cursor: pointer;

    ul {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 20px;

      li {
        width: 100%;
        min-width: 260px;
        background: #f3f5fb;
        border-radius: 0.625rem;
        padding: 0.625rem;
        text-align: left;
        box-sizing: border-box;
        img {
          width: 100%;
          border-radius: 0.625rem;
        }
        h4 {
          margin: 0.6rem 0;
        }
      }
    }
  }
}

@media screen and (max-width: 1221px) {
  .home {
    .contest ul {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .box-center {
      padding: 1.25rem $overall-padding;
    }
  }
}
@media screen and (min-width: 663px) {
  .home {
    .box-center {
      padding: 1.25rem $overall-padding;
    }
  }
}

@media screen and (max-width: 936px) {
  .home {
    .contest ul {
      grid-template-columns: 1fr 1fr;
    }
    .box-center {
      padding: 1.25rem $overall-padding;
    }
  }
}

@media screen and (max-width: 663px) {
  .home {
    .contest ul {
      grid-template-columns: 1fr;
    }
    .pagination {
      width: 300px;
    }
    .box-center {
      padding: 1.25rem;
      box-sizing: border-box;
    }
  }
}
</style>
